import './jquery-3.5.1.min.js'
import { lazyload } from './jquery.lazyload.js'

class dataList {
    constructor() {

    }
    init() {
        //列表渲染以及商品的排序，分页
        this.dataRender()

        //回退页面
        this.backPage()
    }

    dataRender() {
        let dataUrl = 'http://127.0.0.1/SAMSUNGproject/backend/dataList.php'



        //
        function dataRender(datalist) {
            let str = ''
            $.each(datalist, (index, element) => {

                str += `
               <div class="data_item">
                <div class="data_header">
                    <span>新品</span>
                    <span>免息</span>
                    <span>买赠</span>
                    <span>以旧换新</span>
                </div>
                <div class="data_item_container">
                    <div class="data_item_img" >
                        <img class="lazyload" data-original="${element.url}" alt="">
                    </div>
                <div class="data_item_name">${element.title}</div>
                    <div class="data_item_money">￥${element.price}</div>
                    <div class="data_item_tz"><input type="button" sid="${element.sid}" value="查看更多">  </div>
                </div>
                </div>
                
                `
            })
            $('.data_Content_item').html(str)
        }
        //获取数据进行渲染页面列表
        $.ajax({
            url: dataUrl,
            method: 'get',
            dataType: 'json',
        }).then((result) => {
            let datalist = result.pagecontent
            dataRender(datalist)

            //懒加载过程
            $('img.lazyload').lazyload({
                effect: 'fadeIn' //fadeIn  slideDown
            });


            // 分页排序，
            $('.page').pagination({
                pageCount: result.pagesize,
                jump: true,
                coping: true,
                homePage: '首页',
                endPage: '尾页',
                prevContent: '上页',
                nextContent: '下页',
                callback: function (index) {
                    console.log(index.getCurrent())
                    $.ajax({
                        method: 'get',
                        url: dataUrl,
                        data: {
                            page: index.getCurrent()
                        },
                        dataType: 'json'
                    }).then((result) => {
                        let datalist = result.pagecontent
                        dataRender(datalist)

                        //懒加载过程
                        $('img.lazyload').lazyload({
                            effect: 'fadeIn' //fadeIn  slideDown
                        });


                    })
                }
            });

            //排序
            //点击发送ajax请求进行排序当前第一页
            let sort = null
            let num = 0
            $('.jgpx').on('click', function () {
                //判断正负数来改变升序降序排列
                num++
                if (num % 2 !== 0) {
                    sort = 'asc'
                    $('.jgpxL span').eq(0).css({
                        borderBottomColor: '#333'
                    })
                    $('.jgpxL span').eq(1).css({
                        borderTopColor: ' #d8d8d8'
                    })
                }
                else {
                    sort = 'desc'
                    $('.jgpxL span').eq(0).css({
                        borderBottomColor: '#d8d8d8'
                    })
                    $('.jgpxL span').eq(1).css({
                        borderTopColor: ' #333'
                    })
                }
                //排列以后改变页面button样式



                $.ajax({
                    method: 'get',
                    url: dataUrl,
                    data: {
                        page: 1,
                        sort: sort
                    },
                    dataType: 'json'
                }).then((result) => {
                    console.log(result);
                    let datalist = result.pagecontent
                    dataRender(datalist)
                    $('img.lazyload').lazyload({
                        effect: 'fadeIn' //fadeIn  slideDown
                    });
                })
            })

            $('.page').pagination({
                pageCount: result.pagesize,
                jump: true,
                coping: true,
                homePage: '首页',
                endPage: '尾页',
                prevContent: '上页',
                nextContent: '下页',
                callback: function (index) {
                    // console.log(index.getCurrent())
                    $.ajax({
                        method: 'get',
                        url: dataUrl,
                        data: {
                            page: index.getCurrent(),
                            sort: sort
                        },
                        dataType: 'json'
                    }).then((result) => {
                        let datalist = result.pagecontent
                        dataRender(datalist)

                        //懒加载过程
                        // $('img.lazyload').lazyload({
                        //     effect: 'fadeIn' //fadeIn  slideDown
                        // });

                    })
                }
            });


           



        })
    }

    

}
export {
    dataList
}